document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const normalModeBtn = document.getElementById('normal-mode');
  const darkModeBtn = document.getElementById('dark-mode');
  const eyeProtectModeBtn = document.getElementById('eye-protect-mode');
  const resetModeBtn = document.getElementById('reset-mode');
  
  // 状态指示器
  let statusText = document.createElement('div');
  statusText.style.textAlign = 'center';
  statusText.style.marginTop = '10px';
  statusText.style.fontSize = '12px';
  statusText.style.color = '#666';
  document.body.appendChild(statusText);

  // 从存储中获取当前主题
  chrome.storage.sync.get('theme', function(data) {
    const currentTheme = data.theme || 'normal';
    highlightCurrentTheme(currentTheme);
    statusText.textContent = `当前主题: ${getThemeName(currentTheme)}`;
  });

  // 设置按钮点击事件
  normalModeBtn.addEventListener('click', function() {
    applyTheme('normal');
  });

  darkModeBtn.addEventListener('click', function() {
    applyTheme('dark');
  });

  eyeProtectModeBtn.addEventListener('click', function() {
    applyTheme('eye-protect');
  });
  
  resetModeBtn.addEventListener('click', function() {
    resetTheme();
  });

  // 应用主题函数
  function applyTheme(theme) {
    // 显示加载状态
    statusText.textContent = '正在应用主题...';
    
    // 保存主题设置
    chrome.storage.sync.set({theme: theme}, function() {
      console.log('主题已保存:', theme);
    });
    
    // 高亮当前选中的主题按钮
    highlightCurrentTheme(theme);
    
    // 向当前标签页发送消息
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs && tabs[0]) {
        chrome.tabs.sendMessage(
          tabs[0].id, 
          {action: "changeTheme", theme: theme},
          function(response) {
            if (chrome.runtime.lastError) {
              console.log('发送消息错误:', chrome.runtime.lastError);
              // 即使出错，也尝试应用主题（可能是页面刚加载，内容脚本还未准备好）
              statusText.textContent = `已应用${getThemeName(theme)}（刷新页面后生效）`;
              return;
            }
            
            if (response && response.success) {
              statusText.textContent = `已应用${getThemeName(theme)}`;
            } else {
              statusText.textContent = `已应用${getThemeName(theme)}`;
            }
          }
        );
      } else {
        statusText.textContent = '无法获取当前标签页';
      }
    });
  }

  // 高亮当前主题按钮
  function highlightCurrentTheme(theme) {
    // 移除所有按钮的边框
    normalModeBtn.style.border = '';
    darkModeBtn.style.border = '';
    eyeProtectModeBtn.style.border = '';
    
    // 为当前主题按钮添加边框
    switch(theme) {
      case 'normal':
        normalModeBtn.style.border = '2px solid #007bff';
        break;
      case 'dark':
        darkModeBtn.style.border = '2px solid #007bff';
        break;
      case 'eye-protect':
        eyeProtectModeBtn.style.border = '2px solid #007bff';
        break;
    }
  }
  
  // 获取主题名称
  function getThemeName(theme) {
    switch(theme) {
      case 'normal':
        return '正常模式';
      case 'dark':
        return '暗黑模式';
      case 'eye-protect':
        return '护眼模式';
      default:
        return '未知模式';
    }
  }
  
  // 重置主题函数
  function resetTheme() {
    // 显示加载状态
    statusText.textContent = '正在恢复初始主题...';
    
    // 清除存储中的主题设置
    chrome.storage.sync.remove('theme', function() {
      console.log('主题设置已重置');
    });
    
    // 高亮正常模式按钮（默认模式）
    highlightCurrentTheme('normal');
    
    // 向当前标签页发送消息，强制重置主题
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      if (tabs && tabs[0]) {
        // 直接刷新页面是最可靠的重置方法
        chrome.tabs.reload(tabs[0].id);
        statusText.textContent = '已恢复初始主题，页面正在刷新...';
      } else {
        statusText.textContent = '无法获取当前标签页';
      }
    });
  }
});
